const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') 
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.js',					// 项目入口
    output: {
        filename: 'main.js',                  // 默认打包后的文件名 bundle.js
        path: path.resolve(__dirname, 'dist')   // 默认打包后的文件目录 dist
    },
    plugins:[
        //都是插件
          // 插件使用2. plugins 属性当中,创建实例, 按需添加参数
        // 这个插件如果不放任何参数, 默认生成 main.css 文件
        // 如果想要修改文件名, 就可以给一个配置对象, 然后里面添加 filename 属性
        new MiniCssExtractPlugin(),
        new HtmlWebpackPlugin({
            template: 'public/index.html'
          }),
        // 调用清除打包目录插件
        new CleanWebpackPlugin(),
    ],
    // 模块加载器配置项
    module: {
        rules: [
            {
                test: /\.css$/,			// 匹配css扩展名文件
                use:[			
                    MiniCssExtractPlugin.loader,		// 配置loader加载器
                    // 'style-loader',		// 把css代码写入到网页中
                    'css-loader'		// 读取css的代码
                ]	
            },
            {
                test: /\.less$/,		// 匹配less扩展名文件
                use:[	
                    MiniCssExtractPlugin.loader,			
                    // 'style-loader',		// 把less代码写入到网页中
                    'css-loader',		// 读取less的代码
                    'less-loader'		// 解释编译less代码
                ]	
            },
            {
                test: /\.scss$/,	// 匹配图片文件
                use:[				
                    'style-loader',	// 把scss代码写入到网页中
                    'css-loader',		// 读取scss的代码
                    'sass-loader'		// 解释编译sass代码
                ]	
            },
            {
                test: /\.(png|svg|jpg|gif)$/,	// 匹配图片文件
                use: [
                    {
                        loader: "file-loader",              // 处理图片文件返回链接
                        options: {
                            outputPath: "images"            //  输出到dist下的images目录
                        }
                    } 
                ]
            },
         
         
            // {
            //     test: /\.ttf$/,
            //     use: [
            //         {
            //             loader: "file-loader",              // 处理图片文件返回链接
            //             options: {
            //                 outputPath: "assets"            //  输出到dist下的images目录
            //             }
            //         }
            //     ]
            // }
        ]
    }
};